<template>
	<view>
		<music :title="musicInfo.songs[0].name" :iconList="['&#xe728;','&#xe600;']"></music>
		<view class="bgc">
			<view class="pageTop">
				<view class="pageTop01">
					<image src="../../static/images/wangyiyunyinyue.png"></image>
					<view>网易云音乐</view>
					<view class="pointImage">
						<image src="../../static/images/needle.png"></image>
					</view>
				</view>
				<view class="pageTop02" @click="setIsPause">
					<image src="../../static/images/disc.png"></image>
					
					<image :src="isPause ? '../../static/images/mti-暂停2.png' : '../../static/images/mti-播放2.png' "></image>
					<image :src="musicInfo.songs[0].al.picUrl" :style="{transform: 'rotate(' + roundImage +'deg)'}"></image>
				</view>
			</view>
		</view>
		<view class="showMusicList">
			<scroll-view scroll-y show-scrollbar={{true}}>
				
				<!-- showbutton -->
				<view :style="{'margin-top': 600 + 'rpx;'}" class="test">
				<!-- <view style="margin-top: 600rpx;" class="test"> -->
					<view v-for="(item, index) in musicChar" :key="index" class="musciText" :class="showIndex == index ?'active' :  ''">
						{{item.lyric}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import music from "@/component/musciHead/musciHead.vue";
	import '@/common/iconfont.css';
	import {onMounted, ref} from "vue";
	import {useRoute} from 'vue-router';
	
	let selectIndex = ref(0);
	let showIndex = ref(0)
	let musicData = ref("")
	let musicInfo = ref({
	})
	let roundImage = ref(0)
	components: {
		music
	}
	let musicChar = ref([])
	let isPause = ref(true)
	let innerAudio = ref(Object)
	let showbutton = ref(600)
	onMounted(()=>{
		const id = useRoute().query.id;
		// console.log(id)
			// 该路径是播放路径
			// url:"http://localhost:3000/song/url?id=" + id,
		uni.request({
			url:"http://localhost:3000/song/url?id=" + id,
			success: (ref) => {
				
				console.log("歌曲播放", ref)
				
				innerAudio.value = uni.createInnerAudioContext({
					useWebAudioImplement: true
				});
				console.log(ref.data.data[0].url)
				innerAudio.value.src = ref.data.data[0].url
				// innerAudio.value.play();
				setIsPause();
			}
		})
			
			// 获取歌曲详细信息
			// http://localhost:3000/song/detail?ids=66285
		uni.request({
			url: "http://localhost:3000/song/detail?ids=" + id,
			success: (ref)=> {
				
				musicInfo.value = ref.data
				console.log("歌曲详细信息", musicInfo.value)
				
				
			}
		})
			
			// 获取歌词
		uni.request({
			url:"http://localhost:3000/lyric?id=" + id,
			success: (res)=>{
				// console.log(res)
				// musicData.value = ref.data.lrc
				
				// res = res.data;
				// let lyric=res.data.lrc.lyric;
				let lyric=res.data.lrc.lyric;

				    
				let result=[];
				//利用正则表达式进行分割
				
				
				// console.log(lyric)
				
				// let re = /^((?:\{[^{}]*\})*)($.*$)/s;
				let re = /\[([^\]]+)\]([^[]+)/g;
				console.log(lyric.match(re))
				//$0该项  $1该项的第一个子项（时间） $2该项的第二个子项（内容） 
				lyric.replace(re,($0,$1,$2)=>{
					//存入数组
					result.push({time:formatToSec($1),lyric:$2})
				})
				
				
				// console.log(result)

				musicChar.value = result
				// showbutton.value -= (musicChar.value * 40);
				// console.log(musicData.value)
			}
		})
		
	})
	
	function formatToSec(time){
		var arr = time.split(":");
		// console.log(arr);
		return (parseFloat(arr[0] * 60) + parseFloat(arr[1])).toFixed(2);
	}
	
	function setIsPause(){
		// console.log("进入setPause")
		isPause.value = !isPause.value;
		if(isPause.value){
			
			innerAudio.value.pause();
		}else{
			// false是播放
			console.log("开始播放")
			innerAudio.value.play();
			listenLyricIndex();
		}
	}
	function listenLyricIndex(){
		// clearInterval(this.time)
		// console.log(isPause)
		setInterval(()=>{
			
			if(!isPause.value){
				selectIndex.value+=0.1;
				// showIndex.value = Math.floor(selectIndex.value);
				roundImage.value++;
				// console.log("selec",selectIndex.value)
				// console.log(musicChar.value.length)
				for (let i = 0; i < musicChar.value.length; i++) {
					if (showIndex.value > musicChar.value.length -1){
						break;
					}
					
					if (musicChar.value[i].time < innerAudio.value.currentTime && musicChar.value[i+1].time>innerAudio.value.currentTime){
						// console.log(innerAudio.value.currentTime," ",musicChar.value[i].time,"  " , i)
					  //说明歌词匹配
						showIndex.value = i;
					}

				}
			}
		},100)
	}
</script>

<style lang="scss" scoped>
	.active{
		color: #fff;
		font-weight: 800;
		font-size: 42rpx;
	}
	.bgc{
		background-color: #4a4a4a;
	}
	.pageTop{
		width: 100%;
		height: 800rpx;
		// background-color: lightgreen;
		display: flex;
		flex-direction: column;
		
		.pageTop01{
			width: 100%;
			height: 800rpx;
			
			display: flex;
			flex-direction: row;
			>:nth-child(n){
				margin: 15rpx;
			}
			image{
				border-radius: 30rpx;
				width: 50rpx;
				height: 50rpx;
			}
			view{
				color: #fff;
			}
			.pointImage{
				position: absolute;
				
				left: 300rpx;
				width: 300rpx;
				height: 500rpx;
				image{
					z-index: 2;
					width: 100%;
					height: 100%;
				}
			}
		}
		.pageTop02{
			// 采用绝对定位
			// background-color: #000;
			width: 500rpx;
			height: 500rpx;
			top: 400rpx;
			left: 150rpx;
			position: absolute;
			
			image{
				z-index: 1;
				width: 100%;
				height: 100%;
				
			}
			>:nth-last-child(2){
				position: absolute;
				top: 180rpx;
				left: 180rpx;
				z-index: 3;
				width: 30%;
				height: 30%;
				
			}
			
			>:nth-last-child(1){
				position: absolute;
				top: 100rpx;
				left: 100rpx;
				z-index: 0;
				width: 60%;
				height: 60%;
				border-radius: 100rpx;
			}
			
		}
	}
	.showMusicList{
		color: beige;
		margin: 0;
		padding-top: 80rpx;
		width: 100%;
		// height: 800rpx;
		background-color: #4a4a4a;
		display: flex;
		flex-direction: column;
		align-items: center;
		scroll-view{
			font-size: 30rpx;
			width: 420rpx;
			height: 600rpx;
		
			// background-color: #a7a7a7;
			.musciText{
				margin: 10rpx;
			}
		}
	}
</style>
